<template>
  <!-- 企业排名分析 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>企业排名分析</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
      </div>
    </header>
    <!-- 内容区 -->
    <section style="margin-top:10px">
      <el-row class="marginT10" :gutter="15">
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>企业总合同金额排名Top5</span>
              <PriceOrder :command.sync="command" :table-data.sync="valuePriceList" :pro-list.sync="proList" />
            </h3>
            <div class="cont">
              <EcharsBarX :command="command" height="300px" :pro-list="[...proList]" :value-price-list="[...valuePriceList]" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getLandAll">全部</span>
              <span>{{ landTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="8">
                <EchartsPie :legend="[...landLenged]" :data-list="LandTypedata" @setTitle="setTitle" />
              </el-col>
              <el-col :span="16">
                <ProjectTable :list-data="LandllistData" :list-header="listHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getLevelAll">全部</span>
              <span>{{ levelTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="8">
                <EchartsPie :legend="[...levelLengd]" :data-list="Leveldata" @setTitle="setTitle" />
              </el-col>
              <el-col :span="16">
                <ProjectTable :list-data="LevellistData" :list-header="listHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title tab-enterprise">
              <span :class="{active: tabEnter}" @click="tabEnterprise(true)">本地企业总合同金额排名</span>
              <span :class="{active: !tabEnter}" @click="tabEnterprise(false)">外地企业总合同金额排名</span>
            </h3>
            <el-row class="cont">
              <ProjectTable v-if="tabEnter" :list-data="localList" :list-header="listHeader" />
              <ProjectTable v-if="!tabEnter" :list-data="nolocaList" :list-header="listHeader" />
            </el-row>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { EnterpriseRanking } from '@/api/statisticalAnalysis/EnterpriseRanking'
import EcharsBarX from '@/components/EchartsComponents/EcharsBarX'
import PriceOrder from '@/components/EchartsComponents/PriceOrder'
import EchartsPie from './components/EchartsPie'
import ProjectTable from './components/ProjectTable'
export default {
  name: 'Home',
  components: {
    EcharsBarX,
    EchartsPie,
    ProjectTable,
    PriceOrder
  },
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      command: 'justice',
      tabEnter: true,
      landTitle: '企业所在地区总合同金额排名',
      levelTitle: '企业资质等级总合同金额排名',
      // 表格的表头
      listHeader: [
        { name: '企业名称' },
        { name: '排名' },
        { name: '总合同额(万元)' }
      ],
      // 企业排名 Top5
      valuePriceList: [],
      proList: [], // 图形
      // 企业资质等级
      levelLengd: [],
      Leveldata: [{ contractPrice: 0, qualificationLevel: '无', countCounty: 0, proportion: 0 }], // 图形数据
      LevellistData: [], // 表格数据
      LevelDataAll: [],
      // 企业所在地区
      LandDataAll: [],
      landLenged: [],
      LandTypedata: [{ contractPrice: 0, qualificationLevel: '无', countCounty: 0, proportion: 0 }], // 图形数据
      LandllistData: [], // 表格数据
      // 本地/外地企业
      enterpriseList: [], // 表格数据
      localList: [], // 本地
      nolocaList: [] // 外地
    }
  },
  computed: {
    ...mapState({ proGrade: state => state.basicInfo.proGrade })
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 改变时间
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.valuePriceList = []
      this.proList = []
      this.getList()
    },
    async getList() {
      const { data: {
        level: { qualificationLevel, corporateRankingsVos },
        enterprise: { corporateRankingsVoPlus, enterpriseLocation },
        corporateRankings, nonLocalEnterprisePs
      }} = await EnterpriseRanking(this.filter)
      const qualificationLevelCopy = JSON.parse(JSON.stringify(qualificationLevel))
      // 所在地区
      this.landLenged = corporateRankingsVoPlus.map(item => item.qualificationLevel)
      this.LandTypedata = corporateRankingsVoPlus.length ? corporateRankingsVoPlus : [{ contractPrice: 0, qualificationLevel: '无', countCounty: 0, proportion: 0 }]
      this.LandDataAll = enterpriseLocation
      this.LandllistData = enterpriseLocation
      // 本地/外地企业
      this.enterpriseList = nonLocalEnterprisePs[0]
      this.localList = nonLocalEnterprisePs.inCompany // 本地
      this.nolocaList = nonLocalEnterprisePs.outCompany // 外地
      // 企业资质等级
      //  = corporateRankingsVos.map(item => item.qualificationLevel)
      if (corporateRankingsVos.length) {
        this.Leveldata = corporateRankingsVos.map(item => {
          item.qualificationLevel = this.selectDictLabel(this.proGrade, item.qualificationLevel)
          this.levelLengd.push(item.qualificationLevel)
          return item
        })
      } else {
        this.Leveldata = [{ contractPrice: 0, qualificationLevel: '无', countCounty: 0, proportion: 0 }]
      }
      this.LevellistData = [...qualificationLevelCopy]
      this.LevellistData = qualificationLevelCopy.map(item => {
        const qualificationLevel = this.selectDictLabel(this.proGrade, item.qualificationLevel)
        item.qualificationLevel = qualificationLevel
        return item
      })
      this.LevelDataAll = [...qualificationLevelCopy]
      /* this.LevelDataAll = qualificationLevelCopy.map(item => {
        const qualificationLevel = this.selectDictLabel(this.proGrade, item.qualificationLevel)
        item.qualificationLevel = qualificationLevel
        return item
      })*/
      // 企业排名Top5
      corporateRankings.splice(0, 5).forEach(item => {
        this.valuePriceList.push(item.contractAmount)
        this.proList.push(item.enterpriseName)
      })
    },
    goProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    },
    getLevelAll() {
      this.levelTitle = '企业资质等级总合同金额排名'
      this.LevellistData = this.LevelDataAll
    },
    getLandAll() {
      this.landTitle = '企业所在地区总合同排名金额'
      this.LandllistData = this.LandDataAll
    },
    // 设置标题切换数据
    setTitle(title) {
      console.log(title)
      if (this.landLenged.includes(title)) {
        this.landTitle = title
        this.LandllistData = this.LandDataAll.filter(item => item.regionName === title)
      } else if (this.levelLengd.includes(title)) {
        this.levelTitle = title
        this.LevellistData = this.LevelDataAll.filter(item => item.qualificationLevel === title)
      }
    },
    // 切换本地外地企业
    tabEnterprise(bool) {
      if (bool) {
        this.enterpriseList = this.localList
      } else {
        this.enterpriseList = this.nolocaList
      }
      this.tabEnter = bool
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
